<html>
<head>
<title>Chat Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

    function TextCanvas(t_margin, l_margin, b_margin, r_margin, line_size) {
	var self = this;
	self.t = t_margin,
	self.l = l_margin,
	self.b = b_margin,
	self.r = r_margin,
	self.size = line_size,
	self.w_lines = [],
	self.canvas = 'no_canvas',
	self.ctx = 'no_ctx',
	self.max_lines = function() { return Math.floor((self.canvas.height-self.t-self.b) / self.size); },
	self.printLines = function() {
	    var last_line = self.w_lines.length;
	    var i = last_line - self.max_lines() - 1;
	    var ii = 0;
	    if (i < 0) i = 0;
		
	    while ( i < last_line ) {
		var current_line = self.w_lines[i];
		self.ctx.fillStyle = "rgb(255,255,255)";
		self.ctx.fillRect(self.l, self.t + self.size*(ii-.75), self.canvas.width, self.size*1.2);
		self.ctx.fillStyle = "rgb(0,0,0)";
		self.ctx.fillText(current_line, self.l, self.t + self.size * ii);
		i += 1;
		ii += 1;
            }
	},

	self.print = function (evt) {
	    self.w_lines = self.w_lines.concat(self.wrapLines(evt.data));
	    self.printLines(); 
	},

    	self.wrapLines = function (text) {
            var max_width = self.canvas.width - (self.l+self.r);
            if (self.ctx.measureText(text).width < max_width) {
                return [text];
            }
            var words = text.split(' ');
            var line  = "";
	    var lines = [];
	    while (words.length > 0) {
	        if (self.ctx.measureText(line + words[0]).width < max_width ) {
	            line += words.shift() + " ";
	        } else {
	            self.w_lines.push(line);
	            line = "";
	        }
	        if (words.length === 0) {
	            lines.push(line);
	        }
	    }
	    return lines;
	}
    }


    function logger(msg) {
    	setTimeout(function() {
    	    throw new Error(msg);
    	}, 0);
    }

    $("#form").submit(function() {
	var msg = $("#msg");
        if (!conn) {
            return false;
        }
        if (!msg.val()) {
            return false;
        }
        conn.send(msg.val());
        msg.val("");
        return false;
    });


    if (window["WebSocket"]) {
	var textCanvas = new TextCanvas(10,10,10,10,15);	
	var cliCanvas = new TextCanvas(10,10,10,10,15);
	cliCanvas.canvas = $("#cli")[0];
	cliCanvas.ctx = cliCanvas.canvas.getContext('2d');

	var logCanvas = new TextCanvas(10,10,10,10,15);
	logCanvas.canvas = $("#log")[0];
	logCanvas.ctx = logCanvas.canvas.getContext('2d');

        var conn = new WebSocket("ws://127.0.0.1:8080/cli");
        conn.onmessage = cliCanvas.print;

	var conn2 = new WebSocket("ws://127.0.0.1:8080/log");
        conn2.onmessage = logCanvas.print;
	
	//var o = {};
	//o.data = "Starting Log";
	//logCanvas.print(o);
    }
});
</script>
<style type="text/css">
html {
    overflow: hidden;
}

body {
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: gray;
}

#log {
    background: white;
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0.5em;
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    overflow: auto;
}

#cli {
    background: white;
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0.5em;
    position: absolute;
    right: 0.5em;
    bottom: 3em;
    overflow: auto;
}

#form {
    padding: 0 0.5em 0 0.5em;
    margin: 0;
    position: absolute;
    bottom: 1em;
    left: 0px;
    width: 100%;
    overflow: hidden;
}

</style>
</head>
<body>
<canvas id="cli" width="600" height="200" ></canvas>
<canvas id="log" width="600" height="100" ></canvas>
<form id="form">
    <input type="submit" value="Send" />
    <input type="text" id="msg" size="64"/>
</form>
</body>
</html>
